<!DOCTYPE html>
<html>
<head>
    <title>jsmindd</title>
</head>
<link rel="stylesheet" href="css/jsmind.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jsmind.js"></script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    html, body, #jsmind_container {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="jsmind_container"></div>
</body>
</html>
<script>
    var mind = {
        "meta": {
            "name": "jsMind remote",
            "author": "hizzgdev@163.com",
            "version": "0.2"
        },
        "format": "node_tree",
        "data": {
            "id": "root", "topic": "新员工入职", "children": [
                {
                    "id": "easy", "topic": "规章制度", "direction": "right", "children": [
                        {"id": "easy1", "topic": "请休假制度"},
                        {"id": "easy2", "topic": "考勤制度"}
                    ]
                },
                {
                    "id": "open", "topic": "岗位职责", "direction": "right", "children": [
                        {
                            "id": "open1", "topic": "人事部职责", "background-color": "#eee", "foreground-color": "blue",
                            "children": [
                                {"id": "open1-1", "topic": "行政管理"},
                                {"id": "open1-2", "topic": "人事管理"}
                            ]
                        },
                        {"id": "open2", "topic": "信息部职责"},
                        {
                            "id": "open3", "topic": "生产车间", "children": [
                                {"id": "open3-1", "topic": "安全制度"},
                                {"id": "open3-2", "topic": "车间操作手册"}
                            ]
                        }
                    ]
                },
                {
                    "id": "powerful", "topic": "员工福利", "direction": "right", "children": [
                        {"id": "powerful1", "topic": "五险一金"},
                        {"id": "powerful2", "topic": "年休假"},
                        {"id": "powerful3", "topic": "法定节假日"},
                        {"id": "powerful4", "topic": "生日祝福"},
                        {
                            "id": "powerful5", "topic": "成长与进步", "children": [
                                {"id": "powerful5-1", "topic": "员工培训"}
                            ]
                        }
                    ]
                },
            ]
        }
    }
    // jsMind的选项，更多参数参见jsMind的文档
    // https://github.com/hizzgdev/jsmind/blob/master/docs/zh/index.md
    var options = {
        container: 'jsmind_container',//容器的ID
        editable: false,				// 是否启用编辑
        theme: 'primary'				//主题

        //options的属性
        //container : '',         // [必选] 容器的ID
        // editable : false,       // 是否启用编辑
        // theme : null,           // 主题
        // mode :'full',           // 显示模式========full - 子节点动态分布在根节点两侧 [默认值] side - 子节点只分布在根节点右侧
        // support_html : true,    // 是否支持节点里的HTML元素
        // view:{
        //     hmargin:100,        // 思维导图距容器外框的最小水平距离
        //     vmargin:50,         // 思维导图距容器外框的最小垂直距离
        //     line_width:2,       // 思维导图线条的粗细
        //     line_color:'#555'   // 思维导图线条的颜色
        // },
        // layout:{
        //     hspace:30,          // 节点之间的水平间距
        //     vspace:20,          // 节点之间的垂直间距
        //     pspace:13           // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        // },
        // shortcut:{
        //     enable:true,        // 是否启用快捷键
        //     handles:{},         // 命名的快捷键事件处理器
        //     mapping:{           // 快捷键映射
        //         addchild   : 45,    // <Insert>
        //         addbrother : 13,    // <Enter>
        //         editnode   : 113,   // <F2>
        //         delnode    : 46,    // <Delete>
        //         toggle     : 32,    // <Space>
        //         left       : 37,    // <Left>
        //         up         : 38,    // <Up>
        //         right      : 39,    // <Right>
        //         down       : 40,    // <Down>
        //     }
        // },
    }
    var jm = new jsMind(options);


    jm.show(mind);
    //jm.disable_edit();//禁止编制
    jm.expand_all();//展开全部节点
    // jm.add_node(parent_node, nodeid, topic, data);//添加节点

</script>